
<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=10; IE=9; IE=8; IE=7; IE=EDGE" />
    <meta name="viewport" content="width=940, initial-scale=1.0">
    <title>jQuery.floatThead</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<script src="/floatThead/jquery.floatThead.js"></script>
<script type='text/javascript' src="./../../lib/underscore-min.js"></script>
<script type='text/javascript' src="./../../site.js"></script>
<script type='text/javascript' src="./../../lib/bootstrap.js"></script>

<link href="./../../lib/bootstrap.css" media="screen" rel="stylesheet" type="text/css"/>
<link rel="stylesheet/less" type="text/css" href="./../../lib/styles.less">
<script src="./../../lib/less.js" type="text/javascript"></script>
</head>
<style type='text/css'>
    table.collapse {
        border-collapse:collapse;
    }
    body {
        padding-top: 81px;
    }
</style>

<body data-spy="scroll" data-target=".navbar-first">
<a href="https://github.com/mkoryak/floatThead"><img id="under-nav" style="position: absolute; top: 81px; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>

<div class='container'>

    <div id="navs" class="navbar-fixed-top">
<div class="navbar navbar-first" id='navbar'>
    <div class="navbar">
        <div class="navbar-inner">
            <a class="brand" href="/floatThead/" style='margin-left: 0'>jQuery.floatThead</a>

            <ul class="nav">

                    <li><a href="/floatThead/#intro">Intro</a></li>
                    <li><a href="/floatThead/#usage">Usage</a></li>
                    <li><a href="/floatThead/#options">Options</a></li>
                    <li><a href="/floatThead/#examples">Examples</a></li>
                    <li><a href="/floatThead/datatables/">Datatables Example</a></li>
                    <li><a href="/floatThead/other-libs/">Similar Plugins</a></li>
                    <li><a href="/floatThead/#issues">Known Issues</a></li>
                    <li><a href="/floatThead/#download">Download</a></li>

            </ul>

            <a class='btn btn-info btn-small' style='margin:7px 15px 0 0;' href="https://github.com/mkoryak/floatThead">View on GitHub <i class='icon-home icon-white'></i></a>
        </div>
    </div>
</div>
<div class="navbar navbar-inverse">
    <div class="navbar-inner">
        <h4 class="pull-left" style="color:white;">Examples: </h4>
        <ul class="nav">
            <li class=''><a href='/floatThead/examples/big-table/'>Big Table</a></li>
            <li class=''><a href='/floatThead/examples/big-thead/'>Big THead</a></li>
            <li class=''><a href='/floatThead/examples/border-collapse/'>Border Collapse</a></li>
            <li class=''><a href='/floatThead/examples/empty-table/'>Empty Table</a></li>
            <li class='active'><a href='/floatThead/examples/window-scrolling/'>Window Scrolling</a></li>
            <li class=''><a href='/floatThead/examples/init-exceptions/'>Exceptions</a></li>
            <li class=''><a href='/floatThead/examples/inner-scroll/'>Inner Scrolling</a></li>
            <!--<li class=''><a href='/floatThead/examples/positioning-options/'>Positioning Options</a></li>-->
            <li class=''><a href='/floatThead/examples/row-groups/'>Row Groups</a></li>
        </ul>
    </div>
</div>
</div>


    <style type='text/css'>
    body {
        padding-top: 81px;
    }
</style>

    <div class='row'>
        <div class='span12' id='intro'>
            <h1>Common Use-Case: Window Scrolling</h1>
            <p>
                The table header sticks to the top of the page as you scroll down. This is done via absolute positioning it there, you can change it to use fixed positioning if you set <code>useAbsolutePositioning</code> to false.
            </p>
            <p>
                Absolute positioning is a good default because you do not need to call <code>$table.floatThead("reflow")</code> if the table's position changes because of some changes in the DOM
            </p>
<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;table&#39;</span><span class="p">).</span><span class="nx">floatThead</span><span class="p">({</span>
    <span class="nx">scrollingTop</span><span class="o">:</span> <span class="nx">pageTop</span><span class="p">,</span>
    <span class="nx">useAbsolutePositioning</span><span class="o">:</span> <span class="kc">true</span> <span class="c1">//the default value</span>
<span class="p">});</span>
</code></pre></div>

            <p><a href="#" id="makeFixed">Re-initialize plugin with fixed positioning</a></p>
            <p>floated header is using <strong id="posType">position:absolute</strong></p>

            <div class='wrap' id='wrap'>
                <table class='table'>
                    <thead>
                    <tr>
                        <th style="width: 50px;">something</th>
                        <th style="width: 50px;">type</th>
                        <th style="width: 50px;">default</th>
                        <th>description</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>1 blah blah blah</td>
                        <td>blah blah blah</td>
                        <td>blah blah blah</td>
                        <td>blah blah blah</td>
                    </tr><tr>
                        <td>2 blah blah blah</td>
                        <td>blah blah blah</td>
                        <td>blah blah blah</td>
                        <td>blah blah blah</td>
                    </tr><tr>
                        <td>3 blah blah blah</td>
                        <td>blah blah blah</td>
                        <td>blah blah blah</td>
                        <td>blah blah blah</td>
                    </tr><tr>
                        <td>4 blah blah blah</td>
                        <td>blah blah blah</td>
                        <td>blah blah blah</td>
                        <td>blah blah blah</td>
                    </tr><tr>
                        <td>5 blah blah blah</td>
                        <td>blah blah blah</td>
                        <td>blah blah blah</td>
                        <td>blah blah blah</td>
                    </tr><tr>
                        <td>6 blah blah blah</td>
                        <td>blah blah blah</td>
                        <td>blah blah blah</td>
                        <td>blah blah blah</td>
                    </tr><tr>
                        <td>7 blah blah blah</td>
                        <td>blah blah blah</td>
                        <td>blah blah blah</td>
                        <td>blah blah blah</td>
                    </tr><tr>
                        <td>8 blah blah blah</td>
                        <td>blah blah blah</td>
                        <td>blah blah blah</td>
                        <td>blah blah blah</td>
                    </tr><tr>
                        <td>9 blah blah blah</td>
                        <td>blah blah blah</td>
                        <td>blah blah blah</td>
                        <td>blah blah blah</td>
                    </tr><tr>
                        <td>10 blah blah blah</td>
                        <td>blah blah blah</td>
                        <td>blah blah blah</td>
                        <td>blah blah blah</td>
                    </tr><tr>
                        <td>11 blah blah blah</td>
                        <td>blah blah blah</td>
                        <td>blah blah blah</td>
                        <td>blah blah blah</td>
                    </tr><tr>
                        <td>12 blah blah blah</td>
                        <td>blah blah blah</td>
                        <td>blah blah blah</td>
                        <td>blah blah blah</td>
                    </tr><tr>
                        <td>13 blah blah blah</td>
                        <td>blah blah blah</td>
                        <td>blah blah blah</td>
                        <td>blah blah blah</td>
                    </tr><tr>
                        <td>14 blah blah blah</td>
                        <td>blah blah blah</td>
                        <td>blah blah blah</td>
                        <td>blah blah blah</td>
                    </tr><tr>
                        <td>15 blah blah blah</td>
                        <td>blah blah blah</td>
                        <td>blah blah blah</td>
                        <td>blah blah blah</td>
                    </tr><tr>
                        <td>16 blah blah blah</td>
                        <td>blah blah blah</td>
                        <td>blah blah blah</td>
                        <td>blah blah blah</td>
                    </tr><tr>
                        <td>17 blah blah blah</td>
                        <td>blah blah blah</td>
                        <td>blah blah blah</td>
                        <td>blah blah blah</td>
                    </tr><tr>
                        <td>18 blah blah blah</td>
                        <td>blah blah blah</td>
                        <td>blah blah blah</td>
                        <td>blah blah blah</td>
                    </tr><tr>
                        <td>19 blah blah blah</td>
                        <td>blah blah blah</td>
                        <td>blah blah blah</td>
                        <td>blah blah blah</td>
                    </tr><tr>
                        <td>20 blah blah blah</td>
                        <td>blah blah blah</td>
                        <td>blah blah blah</td>
                        <td>blah blah blah</td>
                    </tr><tr>
                        <td>blah blah blah</td>
                        <td>blah blah blah</td>
                        <td>blah blah blah</td>
                        <td>blah blah blah</td>
                    </tr><tr>
                        <td>blah blah blah</td>
                        <td>blah blah blah</td>
                        <td>blah blah blah</td>
                        <td>blah blah blah</td>
                    </tr>
                    </tbody>
                </table>

            </div>
            </div>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        </div>

    <script type="text/javascript">
        $(function(){
            $('table').floatThead({
                scrollingTop: pageTop
            });
          //  alignmentDebugger($('table'))
            var useAbs = true;
            $("#makeFixed").on("click", function(e){
                e.preventDefault();
                useAbs = !useAbs;
                $('table').floatThead('destroy').floatThead({
                    scrollingTop: pageTop,
                    useAbsolutePositioning: useAbs
                });
                $(this).text("Re-initialize plugin with "+(useAbs ? "fixed" : "absolute") +" positioning");
                $("#posType").text("position: "+(useAbs ? "absolute" : "fixed"))
            })
        });

    </script>



    <!-- Start of StatCounter Code for Default Guide -->
    <script type="text/javascript">
        var sc_project=8344784;
        var sc_invisible=1;
        var sc_security="b638e513";
    </script>
    <script type="text/javascript"
            src="http://www.statcounter.com/counter/counter.js"></script>
    <noscript><div class="statcounter"><a title="web analytics"
                                          href="http://statcounter.com/" target="_blank"><img
            class="statcounter"
            src="http://c.statcounter.com/8344784/0/b638e513/1/"
            alt="web analytics"></a></div></noscript>
    <!-- End of StatCounter Code for Default Guide -->
</div>
</body>
</html>
